<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>异常 - 500</title>
  <style>
    #err-template {
      margin: 30px;
      cursor: default;
    }

    .stack {
      padding: 10px;
      line-height: 1.5rem;
    }

    .header {
      display: flex;
      flex-direction: row;
    }

    .header .title {
      font-weight: bold;
      font-size: 20px;
      font-family:  Monaco, monospace;;
      margin: 5px;
    }

    .header .sub-title {
      font-size: 14px;
      color: #fff;
      margin: 5px 5px 0 0;
      height: 10px;
      padding: 5px;
      width: 30px;
      letter-spacing: .2rem;
      line-height: 10px;
      background-color: #00a1d7;
      border-radius: 5px;
    }

    body {
      background: black;
      color: white;
    }

    code {
      font: 11pt/1.25 Monaco, monospace;
    }

    .debug {
      color: Snow;
    }

    .info {
      color: LawnGreen;
    }

    .warn {
      color: GoldenRod;
    }

    .error {
      color: LightCoral;
    }
  </style>
</head>
<body>
<!--<pre><code><span class="debug">%ERROR%</span>
<span class="info">Many messages, such logging, wow!</span>
<span class="warn">Warning, warning!</span>
<span class="error">%STACKTRACE%</span>
</code></pre>-->
<div id="err-template">
  <div class="header">
    <div class="title warn">%ERROR%</div>
    <div class="sub-title">500</div>
  </div>
  <div class="stack error">
    <code>%STACKTRACE%</code>
  </div>
</div>
</body>
<script>
  /**
   * This pen allows you to use all your favourite console functions right in
   * CodePen: `console.log`, `console.info`, `console.warn`, `console.error`,
   * and `console.clear` are supported.
   *
   * To scroll the console to the bottom as messages are printed use the
   * `console.follow` function.
   *
   * Made with love by @nullobject (http://joshbassett.info), 2014.
   */

  var console = (function () {
    var following = false,
        pre = document.createElement('pre'),
        code = document.createElement('code');

    pre.appendChild(code);
    document.body.appendChild(pre);

    return {
      clear: clear,
      follow: follow,
      log: print.bind(this, 'debug'),
      info: print.bind(this, 'info'),
      warn: print.bind(this, 'warn'),
      error: print.bind(this, 'error')
    };

    function clear() {
      while (code.hasChildNodes()) {
        code.removeChild(code.lastChild);
      }
    }

    function follow() {
      following = true;
    }

    function print(className, object) {
      var s = (typeof object === 'string') ? object : JSON.stringify(object),
          span = document.createElement('span'),
          text = document.createTextNode(s + '\n');

      span.setAttribute('class', className);
      span.appendChild(text);
      code.appendChild(span);

      if (following) {
        scrollToBottom();
      }
    }

    function scrollToBottom() {
      window.scrollTo(0, document.body.scrollHeight);
    }
  }());
</script>
</html>